<!Doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#ball {margin-left:0;width:100px;height:100px;border-radius:50%;background:rgba(0,0,255,.4);}
		/*#ball2{margin-left:0;width:150px;height:150px;border-radius:50%;background:rgba(255,0,0,.4);}*/
		.container{width:;height:150px;}
	</style>
</head>
<body>
	<div class="container"><div id="ball"></div></div>
	<input type="button" value="变宽" id="btn" >
	<input type="button" value="变高" id="btn1">
	<script>
		var btn = document.getElementById('btn');
		var btn1 = document.getElementById('btn1');
		var doscale = DoScale('ball');
		btn.onclick = doscale.ScaleBallWidth;
		btn1.onclick = doscale.ScaleBallHeight;
		function DoScale(id){
			var timerWidth,timerHeight;
			var o = {
				ScaleBallWidth: function (){
					clearInterval(timerWidth);
					var ball = document.getElementById(id);
					var step = -1;
					function Scale(){
						var ballWidth = parseInt(window.getComputedStyle(ball).width);
						var ballNewWidth=0;
						if (ballWidth<=30) {
							step = 1;
						} else if(ballWidth>=100){
							step = -1;
						}
						ballNewWidth = ballWidth + step + 'px';
						ball.style.width = ballNewWidth ;
					}
					timerWidth = setInterval(Scale,50);
				},
				ScaleBallHeight: function (){
					clearInterval(timerHeight);
					var ball = document.getElementById(id);
					var step = -1;
					function Scale(){
						var ballHeight = parseInt(window.getComputedStyle(ball).height);
						var ballNewHeight=0;
						if (ballHeight<=30) {
							step = 1;
						} else if(ballHeight>=100){
							step = -1;
						}
						ballNewHeight = ballHeight + step + 'px';
						ball.style.height = ballNewHeight ;
					}
					timerHeight = setInterval(Scale,50);
				}

			}
			return o;
		}
		
		
		

	</script>
</body>
</html>





